import { ref } from 'vue';
import './reset-element.scss';
import './common.scss';
import { ElButton } from 'element-plus';
import ZwUnityKitProfessionSelect from '../../src/ZwUnityKitProfessionSelect/Index.vue';

window.domainApi = 'https://payhub-api-dev.keyid.cn';

export default {
    title: 'Scrm System/ZwUnityKitProfessionSelect Library/ZwUnityKitProfessionSelect',
    component: ZwUnityKitProfessionSelect,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '选中的数据，默认为空'
        },
        filterable: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否可搜索，默认不可搜索'
        },
        placeholder: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: 'placeholder'
        },
        disabled: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否禁用'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitProfessionSelect },
    setup() {
        return { args };
    },
    template: `
        <ZwUnityKitProfessionSelect v-bind="args" v-model="args.modelValue" v-model:name="args.name" />
        {{args.modelValue}}
        {{args.name}}
    `
});

/**
 *  默认演示
 */
export const Default = Template.bind({});

/**
 *  数据回显
 */
export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
    modelValue: 'B0003',
    name: '数码电器/电脑办公'
};
